<template>
	<view class="container">
		<view class="header">
			<image src="../../static/uni.png" mode="widthFix" class="avater"></image>
			<view class="username">云淡风轻</view>
			<view>手机：18835965695</view>
			<view>个性签名：一切为了学生，为了学生一切</view>
		</view>
		<view class="cards">
			<view class="card">
				<image src="../../static/order.png" mode="widthFix" class="icon"></image>
				我的订单
			</view>
			<view style="height: 100%; width: 100%; background-color: #eeeff0"></view>
			<view class="card">
				<image src="../../static/fav.png" mode="widthFix" class="icon"></image>
				我的收藏
			</view>
		</view>
	</view>
</template>

<script setup></script>

<style lang="less" scoped>
.container {
	background-image: radial-gradient(
		circle 8000rpx at 50% -1200rpx,
		#ff9901 0%,
		#ff9901 20%,
		#f5f5f5 calc(20% + 2px)
	);

	.header {
		padding: 1rem;
		display: grid;
		grid-gap: 1rem;
		grid-template-columns: 156rpx 1fr;
		color: #fff;
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.8);

		.avater {
			grid-row: span 3;
			border-radius: 50%;
			width: 100%;
		}

		.username {
			font-size: 36rpx;
			color: #fff;
		}
	}

	.cards {
		background-color: #ffffff;
		box-shadow: 0rpx 3rpx 60rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		padding: 1rem;
		margin: 0.5rem 1rem;
		display: grid;
		grid-template-columns: 1fr 2px 1fr;

		.card {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #666666;

			.icon {
				width: 130rpx;
				height: 130rpx;
			}
		}
	}
}
</style>
